<template>
  <view class="">
    <wd-swipe-action class="address-swipe">
      <view class="address-item" :class="{ default: addressItem.isDefault === 1 }">
        <view class="content" @click="handleContentClick(addressItem)">
          <!-- 地址详情 -->
          <view class="detail">
            <wd-tag v-if="addressItem.isDefault === 1" type="primary" size="small">默认</wd-tag>
            {{
              addressItem.fullAddress ||
              `${addressItem.provinceCode} ${addressItem.cityCode} ${addressItem.districtCode} ${addressItem.address}`
            }}
          </view>

          <!-- 联系人信息 -->
          <view class="info-row">
            <view class="contact-info">
              <text class="name">{{ addressItem.name }}</text>
              <text class="phone">{{ addressItem.phone }}</text>
            </view>
            <view
              @click="handleEditAddress('edit', addressItem)"
              class="iconfont tabbar-bianji b-bootom"
              style="font-size: 40rpx"
            ></view>
          </view>
        </view>
      </view>

      <template #right>
        <view class="swipe-delete" @click="handleDelete(addressItem.id)">
          <text>删除</text>
        </view>
      </template>
    </wd-swipe-action>
  </view>
</template>

<script lang="ts" setup>
//
import { useToast } from 'wot-design-uni'
import { type CustomAddressVo } from '@/service/user/address.d'
const toast = useToast()
const emit = defineEmits(['delete', 'update', 'select'])
defineProps({
  addressItem: {
    type: Object as PropType<CustomAddressVo>,
    default: () => null,
  },
})
const handleContentClick = (addressItem: CustomAddressVo) => {
  emit('select', addressItem) // 触发选择事件
}
// 删除地址
const handleDelete = async (id: number) => {
  emit('delete', id)
}

// 地址操作统一处理
const handleEditAddress = (type: 'add' | 'edit', item?: CustomAddressVo) => {
  uni.navigateTo({
    url: `/pages/my/address/edit?type=${type}&id=${item?.id || ''}`,
  })
}
</script>

<style lang="scss" scoped>
//
.address-swipe {
  width: 700rpx;
  margin: 25rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 20rpx;
}
.address-item {
  box-sizing: border-box;
  width: 100%;
  padding: 35rpx 15rpx;

  border-radius: 8rpx;

  // &.default {
  //   border-left: 4rpx solid #ff5f15;
  // }

  .detail {
    margin-bottom: 8rpx;
    font-size: 28rpx;
    color: #666;
  }

  .info-row {
    display: flex;
    justify-content: space-between;

    .contact-info {
      color: #888;
      .name {
        margin-right: 20rpx;
        font-size: 24rpx;
      }
      .phone {
        font-size: 24rpx;
      }
    }
    .b-bootom {
      width: 80rpx;
      height: 100%;
    }
  }
}
.swipe-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100%;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  background-color: #fe3227;
}
</style>
